import React, { PureComponent } from 'react';
import style from '../index.less';
import { connect } from 'dva';
import { CardC, IconC } from '../../../../comps';
import uuid from 'es6-uuid';
import { Modal } from 'antd';
const { confirm } = Modal;
class OneItemC extends PureComponent {
  state = {};
  onDelete = (id) => {
    confirm({
      title: '确定删除吗?',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        this.props.onDelete(id);
      },
    });
  };
  render() {
    const { data, onClick, onEdit } = this.props;
    const topDiv = (data) => {
      return (
        <div className={style.topDiv}>
          <div className={style.top1}>
            <div>
              <p title={data.productName}>{data.productName}</p>
              {data.isSimulate == 1 && <span>模拟</span>}
            </div>
            <span>{data.productCode}</span>
          </div>
          {data.isSimulate == 1 && (
            <div style={{ display: 'flex' }}>
              <IconC style={{ marginRight: '12px' }} iconId={uuid(8)} type={'edit'} onClick={() => onEdit(data.productId)} />
              <IconC iconId={uuid(8)} type={'delete'} onClick={() => this.onDelete(data.productId)} />
            </div>
          )}
        </div>
      );
    };
    const formatterData = (data) => {
      if (data !== null && data !== undefined) {
        return parseFloat(data * 100).toFixed(2) + '%';
      } else {
        return '--';
      }
    };
    const content = (data) => {
      return (
        <div className={style.contentDiv}>
          <div className={style.oneItem}>
            <p>{formatterData(data.productYield)}</p>
            <p>产品</p>
          </div>
          <div className={style.oneItem}>
            <p>{data.benchMarkId === null ? '--' : formatterData(data.standardYield)}</p>
            <p title={data.benchMarkName}>{data.benchMarkName || '基准'}</p>
          </div>
          <div className={style.bottomItem}>
            <div className={style.oneItem}>
              <p>{formatterData(data.overfulfilYield)}</p>
              <p>超额</p>
            </div>
            <div className={style.oneItem}>
              <p>{formatterData(data.stockYield)}</p>
              <p>股票持仓占比</p>
            </div>
          </div>
        </div>
      );
    };
    return (
      <CardC
        cardId={data.productCode}
        Top={topDiv(data)}
        Content={content(data)}
        onClick={(e) => {
          onClick(e);
        }}
        style={{ float: 'left', marginRight: '20px', marginBottom: '20px' }}
        width='317px'
      />
    );
  }
}
export default OneItemC;
